<template>
	<view>
		<view class="header-box row-box">
			<view style="width: 60%;">
				<u-subsection 
					:list="list" 
					:current="curNow" 
					@change="sectionChange"
					bgColor="#dbf1e1"
					activeColor="#19be6b"
					inactiveColor="#606266"
				></u-subsection>
			</view>
			<!-- <view style="width: 40%;text-align: right;">
				<view class="right-box">自定义</view>
			</view> -->
		</view>
		
		<view class="list-box">
			<view class="item-box" v-for="(item, key) in dataList">
				<view class="title-box">{{item.title}}</view>
				<view class="value-box">{{item.value}}</view>
				<!-- <view class="rate-box">
					<text :style="item.type === 'up'? 'color: #fa3534;':'color: #19be6b;'">{{item.type === 'up' ? '↑':'↓'}}</text>
					<text :style="item.type === 'up'? 'color: #fa3534;':'color: #19be6b;'">{{item.rate}}</text>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {data_string} from "@/utils/dateUtils.js"
	export default {
		data() {
			return {
				list: ['今日', '昨日'],
				curNow: 0,
				dataList: [
					{title: '询价次数', value: '23', rate: '200%', type: 'up'},
					{title: '成交量', value: '13', rate: '600%', type: 'down'},
					{title: '成交率', value: '38.89%', rate: '600%', type: 'up'},
					{title: '回收金额', value: '1238.00', rate: '600%', type: 'up'},
					{title: '回收单价', value: '211.43', rate: '600%', type: 'down'},
				],
			}
		},
		created() {
			this.getDateil()
		},
		methods: {
			getDateil() {
				let pre = data_string(new Date(), 'yyyy-MM-dd')
				if(this.curNow === 1) {
					let arr = pre.split("-");
					let day = Number(arr[2]) - 1;
					pre = arr[0] + "-" + arr[1] + "-" + (day < 10 ? '0' + day : day);
				}
				let data = {
						startTime: pre + " 00:00:00",
						endTime: pre + " 23:59:59"
					}
				this.$request("/appShopApi/order/queryShopStatistics", "post", data).then(res => {
					console.log("当前统计数据：", res)
					this.dataList[0].value = res.data.inquiryCount;
					this.dataList[1].value = res.data.turnover;
					this.dataList[2].value = res.data.turnoverRate ? res.data.turnoverRate + "%" : '0%';
					this.dataList[3].value = res.data.recycleAmount;
					this.dataList[4].value = res.data.recycleAverageAmount;
				})
			},
			sectionChange(index) {
				this.curNow = index;
				this.getDateil();
			}
		}
	}
</script>

<style scoped lang="scss">
	.header-box {
		padding: 28rpx;
		background-image: linear-gradient(#71d5a1, #18b566);
		.right-box {
			background-color: #dbf1e1;
			display: inline-block;
			font-size: 28rpx;
			padding:10rpx 20rpx;
			border-radius: 10rpx;
			
		}
	}
	.list-box {
		margin-top: 20rpx;
		padding: 18rpx;
		.item-box {
			display: inline-block;
			background-color: #fff;
			padding: 20rpx;
			width: 17.5%;
			height: auto;
			margin: 0 0 10rpx 10rpx;
			text-align: center;
			.title-box {
				font-size: 24rpx;
				color: #606266;
			}
			.value-box {
				font-size: 28rpx;
				font-weight: 900;
				margin-top: 30rpx;
				color: #19be6b;
			}
			.rate-box {
				font-size: 24rpx;
				margin-top: 10rpx;
			}
		}
	}
</style>
